Vue.component('my-header', {
    data: function () {
        return {
            // user: localStorage.user ? JSON.parse(localStorage.user) : null,
            select: '',
            select1:'',
            typeArr:["酒店","景区","旅游产品","攻略"],
            menuItem:["周边游","自由行","出境游","亲子游","酒店","民宿","门票","攻略","一日游","跟团游","前往论坛"]
        }
    },
    methods: {
        logout(){
            if (confirm("您确认退出登录吗?")){
                //发请求退出登录
                axios.post("/v1/users/logout").then(function () {
                    localStorage.clear();//清空登录成功时保存的数据
                    location.href="/";
                })
            }
        }
    },
    created: function () {
    },
    template: `
          <el-header height="165px">              
    <div class="center">
    <el-row style="height: 25px;background-color: #386582;color: white" >
      <el-col v-show="localStorage.user==null" span="2"  style="padding: 0 10px" offset="2">
        <a href="/login.html" style="color: #cccccc">登录</a>

      </el-col>
      <el-col v-show="localStorage.user!=null" span="2"  style="padding: 0 10px" offset="2">
        <a href="/personal.html" style="color: #cccccc">欢迎回来</a>

      </el-col>
  
     
      <el-col v-show="localStorage.user!=null" span="2"  style="padding: 0 10px" offset="2">
        <a href="javascript:void(0)" @click="logout()">退出登录</a>

      </el-col>
      <el-col span="2" v-show="localStorage.user==null" span="1" style="width: 400px">
        <a href="/reg.html" style="color: #cccccc">注册</a>
      </el-col>
      <el-col span="2"  span="2" offset="2">
        <a href="/products/list.html">我的订单</a>
      </el-col>
      <el-col span="2"  span="2" offset="1">
        <a href="/help.html">帮助中心</a>
      </el-col>
      <el-col span="2"></el-col>
      <el-col span="2"  span="2" offset="1">
          <el-dropdown>
              <span class="el-dropdown-link" style="color: #cccccc">我的鹿途
              <i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item ><el-button type="primary"  @click="location.href='/personal.html'">我的鹿途</el-button></el-dropdown-item>
                <el-dropdown-item ><el-button type="primary">订单中心</el-button></el-dropdown-item>
                <el-dropdown-item ><el-button type="primary" @click="location.href='/blog.html'">我的社区</el-button></el-dropdown-item>
                <el-dropdown-item ><el-button type="primary" @click="location.href='/blog1.html'">我的等级</el-button></el-dropdown-item>
                <el-dropdown-item ><el-button type="primary">账户管理</el-button></el-dropdown-item>
              </el-dropdown-menu>
          </el-dropdown>
      </el-col>

      <el-col span="2" v-show="localStorage.user!=null" span="1"></el-col>

      <el-col span="12" ></el-col>
    </el-row>
    </div>
    <div class="center" style="height: 60px">
      <el-row gutter="20" style="margin-top: 20px">
        <el-col span="2" offset="2">
          <a href="/" style="font-size: 36px;margin: 0; padding: 0;float: right">
            <img src="imgs/logo.png" style="width: 50px;height: 50px">
          </a>
        </el-col>
        <el-col span="3" style="margin: 0 auto">
          <span style="color: #278996;font-size: 30px;text-align: center;float: left">鹿途网</span>

        </el-col>
        <el-col span="10" offset="1">
          <el-input placeholder="请输入内容"  class="input-with-select">
            <el-select v-model="select"  slot="prepend" placeholder="请选择" >
              <el-option v-for="(type,index) in typeArr" :label="type" :value="index"></el-option>
            </el-select>
            <el-button slot="append" icon="el-icon-search" @click="search()"></el-button>
          </el-input>
        </el-col>
        <el-col span="4">
          <div style="font-size: 12px;margin: 0 auto">
            <p style="margin: 0">服务热线 9:00-17:00</p>
            <p style="margin: 0;font-weight: bold;font-size: 16px">400  679  6699</p>
          </div>
        </el-col>
      </el-row>
    </div>
    <div style="width: 1000px;margin: 0 auto">
    <el-menu mode="horizontal" active-text-color="#278996" style="width: 1200px;margin: 0 auto;padding-bottom: 0">
      <el-menu-item index="1" @click="location.href='/'">首页</el-menu-item>
      <el-menu-item :index="index+1" v-for="(type,index) in menuItem">{{type}}
      </el-menu-item>
    </el-menu>
    </div>
  </el-header>
    `
})




